<template>
  <view >
    <view class="nav">
      <view class="type" @click="type = true">上传语录</view>
      <view class="type" @click="type = false">上传友链</view>
    </view>
    <view v-if="type" class="tp-box">
        <text class="tlt">输入语录内容</text>
        <textarea class="input" v-model="yvlu"></textarea>
        <text class="tlt" @click="chooseImage">选择图片</text>
        <!-- v-if="imageUrl.length == 0" -->
        <image  src="https://ts1.cn.mm.bing.net/th/id/R-C.48ce7d9751be2074c650025b3c5e2d04?rik=Yv0hv9oR7kgp9w&riu=http%3a%2f%2fbpic.588ku.com%2felement_pic%2f00%2f92%2f79%2f7856f23705c36e1.jpg&ehk=HLdSNvGAg0cfuUBtawePAxUdBlq2WlJO%2bh3kQunjIiU%3d&risl=&pid=ImgRaw&r=0" style="width: 50vw;height: 50vw;border: 1px solid #c3bbb8;" @click="chooseImage"></image>
        <view class="add">
          <input class="value" :value="text" @change="input" placeholder="请输入图片链接" />
          <view class="btn" @click="inputtext">添加</view>
        </view>
        <button type="primary" @click="$noMultipleClicks(tijiao)">提交</button>
        <view v-if="imageUrl.length != 0" class="imglist">
          <view class="" v-for="(item,i) in imageUrl" :key="i">
            <image  :src="item"  style="width: 600rpx; vertical-align: text-top;" />
            <icon type="clear"  color="red" @click="rmimg(item)"></icon>
          </view>
        </view>
    </view>
    <view v-else class="tp-box">
      <text class="tlt">输入友链名称</text>
      <input class="input" v-model="name"></input>
      <text class="tlt">输入友链路径</text>
      <input class="input" v-model="link"></input>
      <text class="tlt">输入封面路径(选)</text>
      <input class="input" v-model="cover" ></input>
      <button style="margin-top: 10px;" type="primary" @click="$noMultipleClicks(tijiaolink)">提交</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        type:true,
        imageUrl:[],
        text:'',
        yvlu:'',
        newimage:[],
        name:'',
        link:'',
        cover:'',
        noClick:true,
      };
    },
    methods:{
      tijiaolink(){
        if(!this.name)  return  wx.showToast({
              title: "请输入友链名称",
              icon:'none'
            })
        if(!this.link)  return  wx.showToast({
              title: "请输入友链",
              icon:'none'
            })    
        uni.$req.req(this, 'addlink',{'name':this.name,'link':this.link,'cover':this.cover}).then((res)=>{
          if(res.result.id){
            uni.showModal({
                  		title: '提示',
                  		showCancel:false,
                  		content: "提交成功",
                  		
                  })
          }else{
            uni.showModal({
                  		title: '提示',
                  		showCancel:false,
                  		content: "上传失败",
                  		
                  })
          }
        })
      },
      async tijiao(){
        const that = this
        let promiseArr = [];
       wx.showLoading({
                 title: '上传中'
               })
        if(!this.yvlu){
          wx.showToast({
              title: "请输入语录内容",
              icon:'none'
            })
            return
          }
        
        for(let i=0;i<this.imageUrl.length;i++){
          promiseArr.push(new Promise((reslove, reject) => {
             uniCloud.uploadFile({
                filePath:this.imageUrl[i],  //一次只能上传1张  
                cloudPath:Date.now() + '.png', //图片名称与上传图片名称一致，不一致上传失败  
                success:(res)=>{  
                    this.newimage = this.newimage.concat(res.fileID)
                    reslove();
                    },
                    fail: res=>{
                                    wx.hideLoading();
                                    wx.showToast({
                                      title: "上传失败",
                                    })
                                    uni.navigateBack()
                                  }
                })
          }))
          
          }
          Promise.all(promiseArr).then(res => {
            wx.hideLoading();
            this.sc()
            this.newimage = []
          })
          

         
      },
       sc(){
         uni.$req.req(this, 'addsaying',{'text':this.yvlu,'imgUrl':this.newimage}).then((res)=>{
          if(res.result.Code == 1){
            uni.showModal({
                  		title: '提示',
                  		showCancel:false,
                  		content: "提交成功",
                  		
                  })
          }else{
            uni.showModal({
                  		title: '提示',
                  		showCancel:false,
                  		content: "上传失败",
                  		
                  })
          }
        })
      },
      input(e){
        this.text = e.detail.value
      },
      rmimg(url){
        this.imageUrl.splice(this.imageUrl.indexOf(url), 1)
        uni.$showMsg("删除成功")
      },
      inputtext(e){
        this.imageUrl =  [...this.imageUrl,this.text]
        uni.$showMsg("成功")
      },
      chooseImage(){
        const that =this
        uni.chooseImage({
            sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album'], //从相册选择
            success: function (res) {
                that.imageUrl =  res.tempFilePaths 
            }
        })
      }
    }
  }
</script>

<style lang="scss">
.nav{
display: flex;
border-bottom: 2px solid #ccc;
justify-content: space-around;
align-items: center;
padding: 5px;
  .type{
    width: 40%;
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #efefef;
    color: #fff;
    border-radius: 15px;
    box-shadow: 0px 0px 1px 2px #5EFCE8;
    background-image: linear-gradient( 135deg, #5EFCE8 10%, #736EFE 100%);
  }
}
.tp-box{
  display: flex;
  flex-direction: column;
  padding: 10px;
  align-items: center;
  min-height: 50vh;
  .tlt{
    height: 40px;
    margin: 15px 0;
    font-size: 20px;
      text-shadow:  0 0 2px hsl(40, 28.57% , 28.82%),0 0 2px hsl(40, 28.57% , 28.82%), 0 0 2px hsl(40, 28.57% , 28.82%);
  }
   .add {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 10px 0;
      .value {
        width: 80%;
        margin: 10px;
        border: 2px solid #b0f0e7;
        box-shadow: 0 0 1px #efefef;
        border-radius: 5px;
        padding-left: 5px;
      }

      .btn {
        box-flex: 1;
        margin: 5px;
        white-space: nowrap;
        border: 1px solid #efefef;
        font-size: 14px;
        font-weight: bold;
        color: #ff8bb4;
        background: #fffbd5;
        border-radius: 5px;
        padding: 2px;

      }
    }
  .imglist{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    width: 750rpx;
  }
  .input{
    width: 80vw;
    border: 2px solid #000;
    box-shadow: 0 0 1px 3px #ccc;
    height: 50px;
    padding: 5px 10px;
    border-radius: 15px;
  }
}

</style>
